import React,{Component} from 'react';
import {NavLink,withRouter} from 'react-router-dom'
import { Menu } from 'antd';
import {connect} from "react-redux";
import {saveTitle} from "../../../redux/actions/menu";
import * as Icon from '@ant-design/icons';
// import {
//   HomeOutlined,
//   AppstoreOutlined,
//   BarsOutlined,
//   ToolOutlined,
//   UserOutlined,
//   SafetyOutlined,
//   AreaChartOutlined,
//   BarChartOutlined,
//   LineChartOutlined,
//   PieChartOutlined
// } from '@ant-design/icons';
import './index.css'
import menuList from "../../../config/menuConfig";
import logo from "../../../asset/logo.png";

const { SubMenu } = Menu;

/**
 * 左侧导航的组件
 */
@connect(
    state => ({userInfo: state.login}),
    {
        saveTitle
    }
)

@withRouter

 class LeftNav extends Component {
	 
	 /**
	  * 根据menu的数据数组生成对应的标签数组
	  * 使用map()+递归调用
	  *
	  * @param menuList
	  */
	  createMenu =(menuList)=>{
		  return menuList.map(menu=>{
			  const icon = React.createElement(Icon[menu.icon], {}, null);
			  if (!menu.children) {
			      return (
			          <Menu.Item key={menu.key}  icon={icon} onClick={() => this.props.saveTitle(menu.title)}>
			              <NavLink to={menu.path}>{menu.title}</NavLink>
			          </Menu.Item>
			      )
			  } else {
			      return (
			          <SubMenu key={menu.key}  icon={icon} title={menu.title}>
			              {
			                  this.createMenu(menu.children)
			              }
			          </SubMenu>
			      )
			  }
		  })
	  }
	  
	  selectedKey = (pathname, menuList) => {
	      let key = '';
	      menuList.forEach(item => {
	          if (item.children && item.children instanceof Array) {
	              let child = item.children.find(child => {
	                  return pathname.indexOf(child.path) !== -1;
					  // console.log(pathname.indexOf(child.path) !== 1)
					  
	              })
	              if (child) {
	                  key = child.key;
	              }
	          } else {
	              if (pathname.indexOf(item.path) !== -1) {
	                  key = item.key;
	              }
	          }
	      })
	      return key;
		  // console.log(key)
	  }
	  
	render(){
	  // debugger
		let newMenuList = menuList;
		//当前的路由
		const {pathname} = this.props.location;
		//根据当前的路由去菜单配置列表中寻找选中的key
		let selectedKey = this.selectedKey(pathname, menuList);
		//默认打开的菜单
		let openKeys = pathname.split('/').splice(1);
		return (
		 <div>
		    <NavLink to="/login">
			    <div className="left-nav-header">
				    <img src={logo} alt="logo"/>
				   <h1>后台管理系统</h1>
				</div>
		    </NavLink>
		     <Menu
		              defaultSelectedKeys={selectedKey}
					  selectedKeys={selectedKey}
		              defaultOpenKeys={openKeys}
		              mode="inline"
		              theme="dark"
		            
		            >
					{
						this.createMenu(newMenuList)
					}
		            
		            </Menu>
		 </div>
		)
	}
}

// <Menu.Item key="1" icon={<PieChartOutlined />}>
// 		                首页
// 		              </Menu.Item>
// 		              <SubMenu key="sub1" icon={<MailOutlined />} title="商品">
// 		                <Menu.Item key="2">商品分类管理</Menu.Item>
// 		                <Menu.Item key="3">商品管理</Menu.Item>
// 		              </SubMenu>
// 					  <Menu.Item key="4" icon={<PieChartOutlined />}>
// 					    用户管理
// 					  </Menu.Item>
// 					  <Menu.Item key="5" icon={<PieChartOutlined />}>
// 					    角色管理
// 					  </Menu.Item>
// 		              <SubMenu key="sub2" icon={<AppstoreOutlined />} title="图形图标">
// 		                <Menu.Item key="6">柱形图</Menu.Item>
// 		                <Menu.Item key="7">折线图</Menu.Item>
// 						<Menu.Item key="8">饼图</Menu.Item>
// 		              </SubMenu>
export default LeftNav